import { useEffect, useState, useCallback } from 'react'
import {
  IHeaderBox,
  IPieTypeCharts,
  IBarCharts,
  ISwitch
} from '@/components/index'
import {
  colChartStat,
  colCharStateByGrade,
  cirChartStat
} from '@/axios/english'
import { gradeList } from '@/axios/school'

import { Tabs } from '@nutui/nutui-react-taro'
import { View, ScrollView } from '@tarojs/components'
import './index.scss'

interface ELPProps {
  gradeData?: API.GradeItem[]
}

const typeMap: API.OptionItem[] = [
  { label: '人数', value: 1 },
  { label: '平均分', value: 2 }
]

const abilityMap: API.OptionItem[] = [
  { label: '高', value: 1 },
  { label: '低', value: 2 }
]

const ELPIndex: React.FC<ELPProps> = props => {
  // const { gradeData = [] } = props
  const [gradeData, setGradeData] = useState<API.GradeItem[]>([])

  const [cirChartData, setCirChartData] = useState<API.ChartStatItem[]>([])
  const [barChartData, setBarChartData] = useState<API.ChartStatItem[]>([])
  const [barOfGradeChartData, setBarOfGradeChartData] = useState<
    API.ChartStatItem[]
  >([])
  const [type, setType] = useState<number>(1)
  const [ability, setAbility] = useState<number>(1)
  const [currentGrade, setCurrentGrade] = useState<number>(0)

  const [triggered, setTriggered] = useState<boolean>(false)

  const getChartData = useCallback(async () => {
    try {
      const results = await colChartStat({ tab: type })
      setBarChartData(results)
    } catch {}
  }, [type])

  const getStaticData = useCallback(async () => {
    try {
      if (currentGrade == 0) {
        const results = await cirChartStat({ tab: ability })
        setCirChartData(results || [])
      } else {
        const results = await colCharStateByGrade({
          tab: ability,
          gradeCode: currentGrade
        })
        setBarOfGradeChartData(results)
      }
      setTriggered(false)
    } catch {}
  }, [ability, currentGrade])

  const onRefresh = () => {
    setType(1)
    setAbility(0)
    setCurrentGrade(0)
    getChartData()
    getStaticData()
    setTriggered(true)
  }

  useEffect(() => {
    getChartData()
  }, [getChartData])

  useEffect(() => {
    getStaticData()
  }, [getStaticData])

  useEffect(() => {
    // 查询学校已有年级
    getGradeData()
  }, [])
  const getGradeData = async () => {
    try {
      const results = await gradeList()
      setGradeData(results || [])
    } catch {}
  }
  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox
            title='英语能力'
            options={typeMap}
            current={type}
            handleClick={(value: number) => setType(value)}
          />
          <IBarCharts id='elp_chart' data={barChartData} />
        </View>
        <ISwitch
          options={gradeData}
          current={currentGrade}
          onChange={(value: number) => setCurrentGrade(value)}
        />
        <View className='card_box'>
          <IHeaderBox
            title='英语能力统计'
            options={abilityMap}
            current={ability}
            handleClick={(value: number) => setAbility(value)}
          />
          <Tabs value={currentGrade}>
            <Tabs.TabPane value={0} key={0} title='0'>
              {/* <IPieRoseTypeCharts
                id='elp_pie_chart'
                data={cirChartData}
                fieldNames={{ label: 'name', value: 'totalNum' }}
              /> */}
              <IPieTypeCharts
                id='elp_pie_chart'
                fieldNames={{ label: 'name', value: 'totalNum' }}
              />
              <View className='pie_tip'>
                信息筛选、词汇掌握、语法基础能力都为高/低的人员占比
              </View>
            </Tabs.TabPane>
            {gradeData?.map(item => (
              <Tabs.TabPane
                value={item.gradeCode}
                key={item.gradeCode}
                title={item.gradeName}
              >
                {/* <IBarCharts
                  id={`elp_chart_${item.gradeCode}`}
                  data={barOfGradeChartData}
                /> */}
                <IPieTypeCharts
                  id={`elp_chart_${item.gradeCode}`}
                  fieldNames={{ label: 'name', value: 'totalNum' }}
                />
                <View className='pie_tip'>
                  信息筛选、词汇掌握、语法基础能力都为高/低的人员占比
                </View>
              </Tabs.TabPane>
            ))}
          </Tabs>
        </View>
      </View>
    </ScrollView>
  )
}

export default ELPIndex
